<template>
	<div class="box">
		<div  class="home-page">
			<div class="menu">
				<span>模型选择：</span>
				<select class="selected" v-model="state.currentModel" @click.native="handleChangeModel">
					<option value="bc">百川智能</option>
					<option value="ms">Moonshot</option>
				</select>
				<select class="selected">
					<option :value="item" v-for="item in state.model">{{item}}</option>
				</select>
				
			</div>
			<div v-for="item in state.contentList">
				<div class="news_box_left">
					<div class="box_left_img">
						<img :src="png2"/>
					</div>
					<div class="box_left_content content">
						<p>{{ item.content }}</p>
					</div>
					<div class="vacancy_left">
					</div>
				</div>
				<!-- <div class="news_box_right">
					<div class="vacancy_right">
					</div>
					<div class="box_right_content content">
						<p>阿斯达岁的</p>
					</div>
					<div class="box_right_img">
						<img :src="png3"/>
					</div>
				</div> -->
			</div>
			<div class="bottom_box">
				<el-input type="textarea" v-model="state.desc" placeholder="Enter 发送" style="margin-left:5px;margin-bottom: 5px;"></el-input><img :src="png4" @click="send"/>
			</div>
			<div class="copyright">
				内容由 AI 大模型生成，请仔细甄别
			</div>
		</div>
	</div>
</template>

<script setup name="home">
import * as echarts from 'echarts';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import png1 from '/@/assets/1.png';
import png2 from '/@/assets/2.png';
import png3 from '/@/assets/4.png';
import png4 from '/@/assets/send1.png';
const state = reactive({
	num:1,
	selectedValue:'',
	txt:'',
	desc:'',
	region:'1',
	model:['Baichuan2-Turbo','Baichuan2-Turbo-192k'],
	bc:['Baichuan2-Turbo','Baichuan2-Turbo-192k'],
	kimi:['moonshot-v1-8k','moonshot-v1-32k','moonshot-v1-128k'],
	currentModel:'bc',
	contentList:[{direction:'left',content:'你好!我是北科瑞声产业助手,一个由大模型 AI 提供支持的人工智能助手。我擅长进行产业领域问题解答。如果你有任何疑问或需要帮助，请随时告诉我。'}],
});

// 选择模型
const handleChangeModel = (event) => {
	console.log(event.target.value)
	if(event.target.value == 'bc'){
		state.model = state.bc
	}
	if(event.target.value == 'ms'){
		state.model = state.kimi
	}
}

// 发送
const send= () => {
	var xhr = new XMLHttpRequest();
	var url = "https://api.baichuan-ai.com/v1/chat/completions";
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/json");
        // xhr.setRequestHeader("Content-Type", "application/json");
        xhr.setRequestHeader("Authorization", "Bearer sk-711475cb607c5a6b1735a4d23b3e9a3d");
        let txt ='正在查询....请稍等!';
        xhr.onreadystatechange = function () {
			let chunkText = xhr.response;
            var lines = chunkText.split('\n');
			var str = '';  
              for (var i = 0; i < lines.length; i++) {  
                console.log(lines[i])
                  var line = lines[i];  
                  if (line) {  
                      // 这里只是简单地打印事件数据，你可能需要更复杂的解析逻辑  
                     var txt = line.split('choices')
                     var regex = /\[(.*?)\]/;
                     if(txt[1] !=undefined){
                        var parts = txt[1].split('['); // 使用中括号 [ 分割字符串
                        var result = parts[1].split(']')[0];
                        var jsonObject = JSON.parse(result);
                        str+=jsonObject.delta.content;
                     }
                  }  
              }
			  console.log(str)
        };
        var data = JSON.stringify({
          "model": "Baichuan2-Turbo",
          "messages":[{"role":"user","content":'测试'}],
          "temperature": 0.3,
          "stream": true
        });
        xhr.send(data);
}

// Moonshot
// 百川
// 页面加载时
onMounted(() => {
	
});

</script>

<style scoped lang="scss">
	.box{
		// width: 50%;
		height: 100vh;
		overflow-y:scroll;
	}
	.home-page{
		width: 40%;
		margin: auto;
	}
	.news_box_left{
		width: 100%;
		display: flex;
	}
	.box_left_img{
		width: 55px;
	}
	.box_left_img img{
		width: 55px;
	}
	.box_left_content{
		flex: 1;
		background-color: #ffffff;
	}
	.vacancy_left{
		width: 45px;
	}
	.vacancy_right{
		width: 55px;	
	}
	.news_box_right{
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	.box_right_content{
		// flex: 1;
		margin-right: 10px;
		line-height: 30px;
		background-color: #2d65f7;
		color: #ffffff;
	}
	.box_right_img{
		width: 35px;;
	}
	.box_right_img img{
		width: 35px;
	}
	.content{
		overflow: hidden;
		padding: 11px;
		border-radius: 12px;
		min-height: 50px;
		margin-bottom: 25px;
		flex-flow: column;
	}
	.bottom_box{
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1010;
		height: 65px;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 45%;
		margin: auto;
		margin-bottom: 40px;
		border-radius: 12px;
	}
	.bottom_box img{
		width: 24px;
		height: 24px;
		margin: 20px;
	}
	:deep(.el-textarea__inner) {
		box-shadow: 0 0 0 0px;
		resize: none;
	}
	:deep(.el-textarea__inner:hover) {
		box-shadow: 0 0 0 0px;
		resize: none;
	}
	:deep(.el-textarea__inner:focus) {
		box-shadow: 0 0 0 0px;
		resize: none;
	}
	.copyright{
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1010;
			height: 40px;
			background: #F3F5FC;
			// border-top: 1px solid #F3F5FC;

			display: flex;
		    justify-content: center;
		    align-items: center;
			border-radius: 12px;
	}
	.menu{
			position: fixed;
			right: 0;
			top: 0;
			left: 0;
			z-index: 1010;
			height: 60px;
			background: #F3F5FC;
			// border-top: 1px solid #F3F5FC;

			display: flex;
		    justify-content: center;
		    align-items: center;
			border-radius: 12px;
			padding-top: 20px;
	}
	.selected{
			border: none; //清除select聚焦时候的边框颜色
            height: 40px;
            line-height: 40px; //隐藏select的下拉图标
			background: #F3F5FC;
			margin-right: 30px;
			line-height: 50px;
	}
	
</style>
